.msg_boxs
{
width:50px;
height:50px;
background:#fff;
cursor:pointer;
border-radius:15px;
position:fixed;
top:10px;
right:10px;
text-align:center;
font-family:微软雅黑;
overflow:hidden;
padding-left:5px;
padding-right:5px;
font-size:16px;
z-index:9999999999999999999999999;

transition:width 1s,right 0.4s,height 1s,top 0.5s,background-color 0.5s,transform 0.5s;
-moz-transition:width 1s,right 0.4s,height 1s,top 0.5s,background-color 0.5s,transform 0.5s; /* Firefox 4 */
-webkit-transition:width 1s,right 0.4s,height 1s,top 0.5s,background-color 0.5s,transform 0.5s; /* Safari and Chrome */
-o-transition:width 1s,right 0.4s,height 1s,top 0.5s,background-color 0.5s,transform 0.5s; /* Opera */
}

.dark
{
	position:fixed;;
	width:0px;
	height:0px;
	background-color:yellow;
	opacity:1;
	z-index:999999999;
	transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;
	-o-transition:opacity 0.5s;
}

.duel
{
	position:absolute;
	width:1330px;
	height:750px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	filter:blur(0px);
	-webkit-filter:blur(0px);
	transition:filter 1s;
	-moz-transition:filter 1s; /* Firefox 4 */
	-webkit-transition:filter 1s; /* Safari and Chrome */
	-o-transition:filter 1s; /* Opera */

}

.card
{
    height:150px;
    width:100px;
    cursor:pointer;
    border:0px #fff;
    overflow:hidden;
    transition:height 0s,width 1s,transform 0.2s,border 0.1s;
	-moz-transition:height 0.5s,width 1s,transform 0.2s,border 0.1s; /* Firefox 4 */
	-webkit-transition:height 0.5s,width 1s,transform 0.2s,border 0.1s; /* Safari and Chrome */
	-o-transition:height 0.5s,width 1s,transform 0.2s,border 0.1s; /* Opera */
	box-sizing:border-box;
	border-radius:2px;
}

.card_hand
{
	height:150px;
    width:100px;
    cursor:pointer;
    border:0px #fff;
    transition:height 0s,width 1s,transform 0.2s;
	-moz-transition:height 0.5s,width 1s,transform 0.2s; /* Firefox 4 */
	-webkit-transition:height 0.5s,width 1s,transform 0.2s; /* Safari and Chrome */
	-o-transition:height 0.5s,width 1s,transform 0.2s; /* Opera */
}

.card_hand:hover
{
	transform: scale(1.2,1.2);
}

.card_box
{
	width:100px;
	height:150px;
	position:absolute;
	top:0px;
	border:0px solid #fff;
	transition:height 0s,width 1s,transform 0.2s;
	-moz-transition:height 0.5s,width 1s,transform 0.2s; /* Firefox 4 */
	-webkit-transition:height 0.5s,width 1s,transform 0.2s; /* Safari and Chrome */
	-o-transition:height 0.5s,width 1s,transform 0.2s; /* Opera */
}

.hand_card
{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	height:150px;
	position:relative;
	z-index:10;
	left:0px;
	margin-left:5px;
	margin-right:5px;
	z-index:9999999999999999999999;
	transition:left 0.5s;
	-moz-transition:left 0.5s; /* Firefox 4 */
	-webkit-transition:left 0.5s; /* Safari and Chrome */
	-o-transition:left 0.5s; /* Opera */
}

.aaa
{
	width:30px;
	height:0px;
	position:fixed;
	top:52%;
	right:20px;
	background-color:#00cc47;
	border-radius:13px;
	cursor:pointer;
	transform:translate(0px,0px);
	z-index:999999;
	transition:height 1s,background-color 1s;
	-moz-transition:height 1s,background-color 1s; /* Firefox 4 */
	-webkit-transition:height 1s,background-color 1s; /* Safari and Chrome */
	-o-transition:height 1s,background-color 1s; /* Opera */
}
.aaa:hover
{
	background-color:#06b43e;
}

.bbb
{
	width:30px;
	height:0px;
	position:fixed;
	bottom:52%;
	right:20px;
	background-color:#1E90FF;
	border-radius:13px;
	cursor:pointer;
	z-index:999999;
	transition:height 1s,background-color 1s;
	-moz-transition:height 1s,background-color 1s; /* Firefox 4 */
	-webkit-transition:height 1s,background-color 1s; /* Safari and Chrome */
	-o-transition:height 1s,background-color 1s; /* Opera */
}

.bbb:hover
{
	background-color:#1c7ddc;
}

.my_desk
{
	bottom:20px;
	transform:rotate(0deg);
	right:20px;
	transition:bottom 0.5s,transform 0.4s,right 0.5s;
	-moz-transition:bottom 0.5s,transform 0.4s,right 0.5s; /* Firefox 4 */
	-webkit-transition:bottom 0.5s,transform 0.4s,right 0.5s; /* Safari and Chrome */
	-o-transition:bottom 0.5s,transform 0.4s,right 0.5s; 
}

.my_desk:hover
{
	transform:rotate(5deg);
}

.max_img
{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(88px,-127px);
	width:177px;
	height:0px;
	z-index:99999999;
	transition:height 0.3s;
	-moz-transition:height 0.3s;
	-webkit-transition:height 0.3s;
	-o-transition:height 0.3s;
	font-family:text;
	font-size:60px;
	color:rgba(0,0,0,0.7);
	text-align:center;
	text-align:center;
	line-height:100px;
	overflow:hidden;
}

.move_box
{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(1000px,1000px),rotate(0deg);
	width:100px;
	height:150px;
	z-index:1;
	transition:transform 0s;
	-moz-transition:transform 0s; /* Firefox 4 */
	-webkit-transition:transform 0s; /* Safari and Chrome */
	-o-transition:transform 0s; /* Opera */
}

.hand_box
{
	width:110px;
	z-index:99999999999999999999999999;

	transition:width 0.5s;
	-moz-transition:width 0.5s; /* Firefox 4 */
	-webkit-transition:width 0.5s; /* Safari and Chrome */
	-o-transition:width 0.5s; 
}

.flex_menu
{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;

}

.in_menu
{
	opacity:1;
	cursor:pointer;
	transition:all 0.3s;
	-moz-transition:all 0.3s; /* Firefox 4 */
	-webkit-transition:all 0.3s; /* Safari and Chrome */
	-o-transition:all 0.3s; /* Opera */
}

.in_menu:hover
{
	transform:rotate(90deg);
}

.menu
{
	width:200px;
	height:0px;
	background-color:#fff;
	position:absolute;
	bottom:405px;
	left:425px;
	z-index:99999999999999;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:center;
	justify-content:center;
	border-radius:15px; 
	box-shadow:5px 5px 120px #000;
	transition:height 0.3s;
	-moz-transition:height 0.3s; /* Firefox 4 */
	-webkit-transition:height 0.3s; /* Safari and Chrome */
	-o-transition:height 0.3s; /* Opera */
}

@font-face
{
	font-family:text;
	src:url("text.ttf");
}
.step
{
	position:fixed;
	top:0px;
	left:10px;
	width:500px;
	z-index:9999;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:left;
	justify-content:left;
	margin-left:1px;
	margin-left:1px;
	color:#000;
	font-family:等线;
}

.bar
{
	width:80px;
	height:50px;
	top:0px;
	position:absolute;
	text-align:center;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	opacity: 0.8;
	cursor:pointer;
	color:#fff;
}

.bar:hover
{
	opacity:1;
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
}
html { overflow-x: hidden; overflow-y: hidden; }
*{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.frame
{
	height:40px;
	width:50px;
	position:absolute;
	top:-40px;
	cursor:pointer;
	-webkit-app-region:no-drag;
	transition:all 0.1s;
	z-index:99999999;
}
.frame:hover
{
	background-color:#12ba4d;
}
.frame_buttom
{
	height:40px;
	width:50px;
	line-height:40px;
	text-align:center;
	color:#000;
	position:absolute;
	top:0px;
	left:0px;
	-webkit-app-region:no-drag;
	transition:transform 1.3s,color 0.1s;
	transform:rotate(0deg);
	font-family:微软雅黑;
}
.frame_buttom:hover
{
	color:#fff;
}
.step_box
{
	position:absolute;
	left:0px;
	top:50%;
	width:100%;
	height:0px;
	transform:translate(0px,-50%);
	background-color:#ccc;
	display:-webkit-flex;
    display:flex;
    justify-content:center;
    align-items:center;
	z-index:99999999999999;
	overflow:hidden;
	transition:all 0.15s,width 0s;
	overflow-x:auto;
	box-shadow:50px 50px 200px #000;
}
.steps
{
	width:300px;
	height:300px;
	background-color:#ccc;
	line-height:300px;
	font-size:100px;
	text-align:center;
	color:#000;
	cursor:pointer;
	transition:all 0.1s;
}
.steps:hover
{
	background-color:#01a53a;
	color:#fff;
}
.card_list
{
	width:177px;
	height:254px;
	background-color:#555;
	border-radius:5px;
	margin-top:73px;
	margin-bottom:73px;
	margin-left:16px;
	margin-right:16px;
	transition:0.2s;
	cursor:pointer;
	box-shadow:5px 5px 20px #999;
	box-sizing:border-box;
}
.card_list:hover
{
	transform:translate(0px,-20px);
	box-shadow:7px 10px 30px #777;
}
.at_df
{
	width:70px;
	height:10px;
	background-color:rgba(0,0,0,0.6);
	position:absolute;
	bottom:0px;
	left:10px;
	color:#fff;
	font-size:10px;
	padding:5px;
	line-height:10px;
	border-radius:10px;
	font-family:Microsoft YaHei;
	transition:all 0.2s;
}
.at_df:hover
{
	background-color:rgba(0,0,0,0.8);
}